<template>
  <div class="add-user-box">
    <el-form
      :model="form"
      label-width="80px"
      label-position="left"
      ref="ruleFormRef"
    >
      <el-divider content-position="left">就诊人信息</el-divider>
      <div class="user-info-box identical-style-box">
        <el-form-item label="用户姓名" prop="name">
          <el-input placeholder="请输入用户姓名" v-model="form.name" />
        </el-form-item>
        <el-form-item label="证件类型" prop="certificatesType">
          <el-select
            placeholder="请选择证件类型"
            style="width: 100%"
            v-model="form.certificatesType"
          >
            <el-option
              :label="item.name"
              :value="item.value"
              v-for="item in certainType"
              :key="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码" prop="certificatesNo">
          <el-input
            placeholder="请输入用户证件号码"
            v-model="form.certificatesNo"
          />
        </el-form-item>
        <el-form-item label="用户性别" prop="sex">
          <el-radio-group v-model="form.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthdate">
          <el-date-picker
            type="date"
            placeholder="请选择出生日期"
            v-model="form.birthdate"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input placeholder="请输入用户手机号码" v-model="form.phone" />
        </el-form-item>
      </div>
      <el-divider content-position="left">
        建档信息（完善后部分医院首次就诊不排队建档）
      </el-divider>
      <div class="build-party-box identical-style-box">
        <el-form-item label="婚姻状况" prop="isMarry">
          <el-radio-group v-model="form.isMarry">
            <el-radio :label="1">已婚</el-radio>
            <el-radio :label="0">未婚</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="自费/医保" prop="isInsure">
          <el-radio-group v-model="form.isInsure">
            <el-radio :label="1">自费</el-radio>
            <el-radio :label="0">医保</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="当前地址" prop="addressSelected">
          <el-cascader :props="props" v-model="form.addressSelected" />
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input placeholder="请输入用户详细地址" v-model="form.address" />
        </el-form-item>
      </div>
      <el-divider content-position="left">联系人信息（选填）</el-divider>
      <div class="contacts-info-box identical-style-box">
        <el-form-item label="用户姓名" prop="contactsName">
          <el-input placeholder="请输入用户姓名" v-model="form.contactsName" />
        </el-form-item>
        <el-form-item label="证件类型" prop="contactsCertificatesType">
          <el-select
            placeholder="请选择证件类型"
            style="width: 100%"
            v-model="form.contactsCertificatesType"
          >
            <el-option
              :label="item.name"
              :value="item.value"
              v-for="item in certainType"
              :key="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码" prop="contactsCertificatesNo">
          <el-input
            placeholder="请输入用户证件号码"
            v-model="form.contactsCertificatesNo"
          />
        </el-form-item>
        <el-form-item label="手机号码" prop="contactsPhone">
          <el-input
            placeholder="请输入用户手机号码"
            v-model="form.contactsPhone"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">提交</el-button>
          <el-button type="success" @click="reset">重写</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import {
  reqCertainType,
  reqCityInfo,
  reqAddOrUpdateUser,
} from "@/api/UserPage";
export default {
  data() {
    return {
      form: {
        name: "",
        certificatesType: "",
        certificatesNo: "",
        sex: 0,
        birthdate: "",
        phone: "",
        isMarry: 0,
        isInsure: 0,
        addressSelected: [],
        address: "",
        contactsName: "",
        contactsCertificatesType: "",
        contactsCertificatesNo: "",
        contactsPhone: "",
      },
      certainType: [],
      props: {
        lazy: true,
        async lazyLoad(node, resolve) {
          let result = await reqCityInfo(node.data.id || "86");
          // 整理数据
          let showData = result.data.map((item) => {
            return {
              id: item.id,
              label: item.name,
              value: item.value,
              leaf: !item.hasChildren,
            };
          });
          resolve(showData);
        },
      },
    };
  },
  props: {
    isAddUser: {
      type: Boolean,
      required: true,
    },
    userId: {
      required: true,
    },
    idInfo: {
      required: true,
    },
  },
  watch: {
    userId: {
      handler(newVal) {
        if (newVal) {
          this.form = this.idInfo;
        }
      },
      immediate: true,
    },
  },
  methods: {
    async getCertainType() {
      let result = await reqCertainType();
      if (result.code == 200) {
        this.certainType = result.data;
      }
    },
    async getAddOrUpdateUser() {
      let result = await reqAddOrUpdateUser(this.form);
      if (result.code == 200) {
        this.$message({
          type: "success",
          message: result.message,
        });
        if (this.$route.query.type) {
          this.$router.back();
        } else {
          this.changeIsAddUser();
        }
      }
    },
    submit() {
      this.getAddOrUpdateUser();
      this.reset();
    },
    reset() {
      this.$refs.ruleFormRef.resetFields();
      Object.assign(this.form, {
        name: "",
        certificatesType: "",
        certificatesNo: "",
        sex: 0,
        birthdate: "",
        phone: "",
        isMarry: 0,
        isInsure: 0,
        addressSelected: [],
        address: "",
        contactsName: "",
        contactsCertificatesType: "",
        contactsCertificatesNo: "",
        contactsPhone: "",
      });
    },
    changeIsAddUser() {
      this.$emit("changeIsAddUser", false);
    },
  },
  mounted() {
    this.getCertainType();
  },
};
</script>

<style lang="scss" scoped>
.add-user-box {
  .identical-style-box {
    margin: 0 auto;
    width: 60%;
    .el-form-item {
      width: 100%;
    }
  }
}
</style>
